<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='Ext-Element'>/**
</span> * @class Ext.Element
 */
<span id='Ext-Element-static-property-VISIBILITY'>/**
</span> * Visibility mode constant for use with {@link #setVisibilityMode}. Use visibility to hide element
 * @static
 * @type Number
 */
Ext.Element.VISIBILITY = 1;
<span id='Ext-Element-static-property-DISPLAY'>/**
</span> * Visibility mode constant for use with {@link #setVisibilityMode}. Use display to hide element
 * @static
 * @type Number
 */
Ext.Element.DISPLAY = 2;

<span id='Ext-Element-static-property-OFFSETS'>/**
</span> * Visibility mode constant for use with {@link #setVisibilityMode}. Use offsets (x and y positioning offscreen)
 * to hide element.
 * @static
 * @type Number
 */
Ext.Element.OFFSETS = 3;


Ext.Element.ASCLASS = 4;

<span id='Ext-Element-static-property-visibilityCls'>/**
</span> * Defaults to 'x-hide-nosize'
 * @static
 * @type String
 */
Ext.Element.visibilityCls = 'x-hide-nosize';

Ext.Element.addMethods(function(){
    var El = Ext.Element,
        OPACITY = &quot;opacity&quot;,
        VISIBILITY = &quot;visibility&quot;,
        DISPLAY = &quot;display&quot;,
        HIDDEN = &quot;hidden&quot;,
        OFFSETS = &quot;offsets&quot;,
        ASCLASS = &quot;asclass&quot;,
        NONE = &quot;none&quot;,
        NOSIZE = 'nosize',
        ORIGINALDISPLAY = 'originalDisplay',
        VISMODE = 'visibilityMode',
        ISVISIBLE = 'isVisible',
        data = El.data,
        getDisplay = function(dom){
            var d = data(dom, ORIGINALDISPLAY);
            if(d === undefined){
                data(dom, ORIGINALDISPLAY, d = '');
            }
            return d;
        },
        getVisMode = function(dom){
            var m = data(dom, VISMODE);
            if(m === undefined){
                data(dom, VISMODE, m = 1);
            }
            return m;
        };

    return {
<span id='Ext-Element-property-originalDisplay'>        /**
</span>         * The element's default display mode  (defaults to &quot;&quot;)
         * @type String
         */
        originalDisplay : &quot;&quot;,
        visibilityMode : 1,

<span id='Ext-Element-method-setVisibilityMode'>        /**
</span>         * Sets the element's visibility mode. When setVisible() is called it
         * will use this to determine whether to set the visibility or the display property.
         * @param {Number} visMode Ext.Element.VISIBILITY or Ext.Element.DISPLAY
         * @return {Ext.Element} this
         */
        setVisibilityMode : function(visMode){
            data(this.dom, VISMODE, visMode);
            return this;
        },

<span id='Ext-Element-method-animate'>        /**
</span>         * Perform custom animation on this element.
         * &lt;div&gt;&lt;ul class=&quot;mdetail-params&quot;&gt;
         * &lt;li&gt;&lt;u&gt;Animation Properties&lt;/u&gt;&lt;/li&gt;
         *
         * &lt;p&gt;The Animation Control Object enables gradual transitions for any member of an
         * element's style object that takes a numeric value including but not limited to
         * these properties:&lt;/p&gt;&lt;div&gt;&lt;ul class=&quot;mdetail-params&quot;&gt;
         * &lt;li&gt;&lt;tt&gt;bottom, top, left, right&lt;/tt&gt;&lt;/li&gt;
         * &lt;li&gt;&lt;tt&gt;height, width&lt;/tt&gt;&lt;/li&gt;
         * &lt;li&gt;&lt;tt&gt;margin, padding&lt;/tt&gt;&lt;/li&gt;
         * &lt;li&gt;&lt;tt&gt;borderWidth&lt;/tt&gt;&lt;/li&gt;
         * &lt;li&gt;&lt;tt&gt;opacity&lt;/tt&gt;&lt;/li&gt;
         * &lt;li&gt;&lt;tt&gt;fontSize&lt;/tt&gt;&lt;/li&gt;
         * &lt;li&gt;&lt;tt&gt;lineHeight&lt;/tt&gt;&lt;/li&gt;
         * &lt;/ul&gt;&lt;/div&gt;
         *
         *
         * &lt;li&gt;&lt;u&gt;Animation Property Attributes&lt;/u&gt;&lt;/li&gt;
         *
         * &lt;p&gt;Each Animation Property is a config object with optional properties:&lt;/p&gt;
         * &lt;div&gt;&lt;ul class=&quot;mdetail-params&quot;&gt;
         * &lt;li&gt;&lt;tt&gt;by&lt;/tt&gt;*  : relative change - start at current value, change by this value&lt;/li&gt;
         * &lt;li&gt;&lt;tt&gt;from&lt;/tt&gt; : ignore current value, start from this value&lt;/li&gt;
         * &lt;li&gt;&lt;tt&gt;to&lt;/tt&gt;*  : start at current value, go to this value&lt;/li&gt;
         * &lt;li&gt;&lt;tt&gt;unit&lt;/tt&gt; : any allowable unit specification&lt;/li&gt;
         * &lt;p&gt;* do not specify both &lt;tt&gt;to&lt;/tt&gt; and &lt;tt&gt;by&lt;/tt&gt; for an animation property&lt;/p&gt;
         * &lt;/ul&gt;&lt;/div&gt;
         *
         * &lt;li&gt;&lt;u&gt;Animation Types&lt;/u&gt;&lt;/li&gt;
         *
         * &lt;p&gt;The supported animation types:&lt;/p&gt;&lt;div&gt;&lt;ul class=&quot;mdetail-params&quot;&gt;
         * &lt;li&gt;&lt;tt&gt;'run'&lt;/tt&gt; : Default
         * &lt;pre&gt;&lt;code&gt;
var el = Ext.get('complexEl');
el.animate(
    // animation control object
    {
        borderWidth: {to: 3, from: 0},
        opacity: {to: .3, from: 1},
        height: {to: 50, from: el.getHeight()},
        width: {to: 300, from: el.getWidth()},
        top  : {by: - 100, unit: 'px'},
    },
    0.35,      // animation duration
    null,      // callback
    'easeOut', // easing method
    'run'      // animation type ('run','color','motion','scroll')
);
         * &lt;/code&gt;&lt;/pre&gt;
         * &lt;/li&gt;
         * &lt;li&gt;&lt;tt&gt;'color'&lt;/tt&gt;
         * &lt;p&gt;Animates transition of background, text, or border colors.&lt;/p&gt;
         * &lt;pre&gt;&lt;code&gt;
el.animate(
    // animation control object
    {
        color: { to: '#06e' },
        backgroundColor: { to: '#e06' }
    },
    0.35,      // animation duration
    null,      // callback
    'easeOut', // easing method
    'color'    // animation type ('run','color','motion','scroll')
);
         * &lt;/code&gt;&lt;/pre&gt;
         * &lt;/li&gt;
         *
         * &lt;li&gt;&lt;tt&gt;'motion'&lt;/tt&gt;
         * &lt;p&gt;Animates the motion of an element to/from specific points using optional bezier
         * way points during transit.&lt;/p&gt;
         * &lt;pre&gt;&lt;code&gt;
el.animate(
    // animation control object
    {
        borderWidth: {to: 3, from: 0},
        opacity: {to: .3, from: 1},
        height: {to: 50, from: el.getHeight()},
        width: {to: 300, from: el.getWidth()},
        top  : {by: - 100, unit: 'px'},
        points: {
            to: [50, 100],  // go to this point
            control: [      // optional bezier way points
                [ 600, 800],
                [-100, 200]
            ]
        }
    },
    3000,      // animation duration (milliseconds!)
    null,      // callback
    'easeOut', // easing method
    'motion'   // animation type ('run','color','motion','scroll')
);
         * &lt;/code&gt;&lt;/pre&gt;
         * &lt;/li&gt;
         * &lt;li&gt;&lt;tt&gt;'scroll'&lt;/tt&gt;
         * &lt;p&gt;Animate horizontal or vertical scrolling of an overflowing page element.&lt;/p&gt;
         * &lt;pre&gt;&lt;code&gt;
el.animate(
    // animation control object
    {
        scroll: {to: [400, 300]}
    },
    0.35,      // animation duration
    null,      // callback
    'easeOut', // easing method
    'scroll'   // animation type ('run','color','motion','scroll')
);
         * &lt;/code&gt;&lt;/pre&gt;
         * &lt;/li&gt;
         * &lt;/ul&gt;&lt;/div&gt;
         *
         * &lt;/ul&gt;&lt;/div&gt;
         *
         * @param {Object} args The animation control args
         * @param {Float} duration (optional) How long the animation lasts in seconds (defaults to &lt;tt&gt;.35&lt;/tt&gt;)
         * @param {Function} onComplete (optional) Function to call when animation completes
         * @param {String} easing (optional) {@link Ext.Fx#easing} method to use (defaults to &lt;tt&gt;'easeOut'&lt;/tt&gt;)
         * @param {String} animType (optional) &lt;tt&gt;'run'&lt;/tt&gt; is the default. Can also be &lt;tt&gt;'color'&lt;/tt&gt;,
         * &lt;tt&gt;'motion'&lt;/tt&gt;, or &lt;tt&gt;'scroll'&lt;/tt&gt;
         * @return {Ext.Element} this
         */
        animate : function(args, duration, onComplete, easing, animType){
            this.anim(args, {duration: duration, callback: onComplete, easing: easing}, animType);
            return this;
        },

        /*
         * @private Internal animation call
         */
        anim : function(args, opt, animType, defaultDur, defaultEase, cb){
            animType = animType || 'run';
            opt = opt || {};
            var me = this,
                anim = Ext.lib.Anim[animType](
                    me.dom,
                    args,
                    (opt.duration || defaultDur) || .35,
                    (opt.easing || defaultEase) || 'easeOut',
                    function(){
                        if(cb) cb.call(me);
                        if(opt.callback) opt.callback.call(opt.scope || me, me, opt);
                    },
                    me
                );
            opt.anim = anim;
            return anim;
        },

        // private legacy anim prep
        preanim : function(a, i){
            return !a[i] ? false : (typeof a[i] == 'object' ? a[i]: {duration: a[i+1], callback: a[i+2], easing: a[i+3]});
        },

<span id='Ext-Element-method-isVisible'>        /**
</span>         * Checks whether the element is currently visible using both visibility and display properties.
         * @return {Boolean} True if the element is currently visible, else false
         */
        isVisible : function() {
            var me = this,
                dom = me.dom,
                visible = data(dom, ISVISIBLE);

            if(typeof visible == 'boolean'){ //return the cached value if registered
                return visible;
            }
            //Determine the current state based on display states
            visible = !me.isStyle(VISIBILITY, HIDDEN) &amp;&amp;
                      !me.isStyle(DISPLAY, NONE) &amp;&amp;
                      !((getVisMode(dom) == El.ASCLASS) &amp;&amp; me.hasClass(me.visibilityCls || El.visibilityCls));

            data(dom, ISVISIBLE, visible);
            return visible;
        },

<span id='Ext-Element-method-setVisible'>        /**
</span>         * Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use
         * the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.
         * @param {Boolean} visible Whether the element is visible
         * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
         * @return {Ext.Element} this
         */
        setVisible : function(visible, animate){
            var me = this, isDisplay, isVisibility, isOffsets, isNosize,
                dom = me.dom,
                visMode = getVisMode(dom);


            // hideMode string override
            if (typeof animate == 'string'){
                switch (animate) {
                    case DISPLAY:
                        visMode = El.DISPLAY;
                        break;
                    case VISIBILITY:
                        visMode = El.VISIBILITY;
                        break;
                    case OFFSETS:
                        visMode = El.OFFSETS;
                        break;
                    case NOSIZE:
                    case ASCLASS:
                        visMode = El.ASCLASS;
                        break;
                }
                me.setVisibilityMode(visMode);
                animate = false;
            }

            if (!animate || !me.anim) {
                if(visMode == El.ASCLASS ){

                    me[visible?'removeClass':'addClass'](me.visibilityCls || El.visibilityCls);

                } else if (visMode == El.DISPLAY){

                    return me.setDisplayed(visible);

                } else if (visMode == El.OFFSETS){

                    if (!visible){
                        me.hideModeStyles = {
                            position: me.getStyle('position'),
                            top: me.getStyle('top'),
                            left: me.getStyle('left')
                        };
                        me.applyStyles({position: 'absolute', top: '-10000px', left: '-10000px'});
                    } else {
                        me.applyStyles(me.hideModeStyles || {position: '', top: '', left: ''});
                        delete me.hideModeStyles;
                    }

                }else{
                    me.fixDisplay();
                    dom.style.visibility = visible ? &quot;visible&quot; : HIDDEN;
                }
            }else{
                // closure for composites
                if(visible){
                    me.setOpacity(.01);
                    me.setVisible(true);
                }
                me.anim({opacity: { to: (visible?1:0) }},
                        me.preanim(arguments, 1),
                        null,
                        .35,
                        'easeIn',
                        function(){
                            visible || me.setVisible(false).setOpacity(1);
                        });
            }
            data(dom, ISVISIBLE, visible);  //set logical visibility state
            return me;
        },


<span id='Ext-Element-method-hasMetrics'>        /**
</span>         * @private
         * Determine if the Element has a relevant height and width available based
         * upon current logical visibility state
         */
        hasMetrics  : function(){
            var dom = this.dom;
            return this.isVisible() || (getVisMode(dom) == El.VISIBILITY);
        },

<span id='Ext-Element-method-toggle'>        /**
</span>         * Toggles the element's visibility or display, depending on visibility mode.
         * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
         * @return {Ext.Element} this
         */
        toggle : function(animate){
            var me = this;
            me.setVisible(!me.isVisible(), me.preanim(arguments, 0));
            return me;
        },

<span id='Ext-Element-method-setDisplayed'>        /**
</span>         * Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.
         * @param {Mixed} value Boolean value to display the element using its default display, or a string to set the display directly.
         * @return {Ext.Element} this
         */
        setDisplayed : function(value) {
            if(typeof value == &quot;boolean&quot;){
               value = value ? getDisplay(this.dom) : NONE;
            }
            this.setStyle(DISPLAY, value);
            return this;
        },

        // private
        fixDisplay : function(){
            var me = this;
            if(me.isStyle(DISPLAY, NONE)){
                me.setStyle(VISIBILITY, HIDDEN);
                me.setStyle(DISPLAY, getDisplay(this.dom)); // first try reverting to default
                if(me.isStyle(DISPLAY, NONE)){ // if that fails, default to block
                    me.setStyle(DISPLAY, &quot;block&quot;);
                }
            }
        },

<span id='Ext-Element-method-hide'>        /**
</span>         * Hide this element - Uses display mode to determine whether to use &quot;display&quot; or &quot;visibility&quot;. See {@link #setVisible}.
         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
         * @return {Ext.Element} this
         */
        hide : function(animate){
            // hideMode override
            if (typeof animate == 'string'){
                this.setVisible(false, animate);
                return this;
            }
            this.setVisible(false, this.preanim(arguments, 0));
            return this;
        },

<span id='Ext-Element-method-show'>        /**
</span>        * Show this element - Uses display mode to determine whether to use &quot;display&quot; or &quot;visibility&quot;. See {@link #setVisible}.
        * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
         * @return {Ext.Element} this
         */
        show : function(animate){
            // hideMode override
            if (typeof animate == 'string'){
                this.setVisible(true, animate);
                return this;
            }
            this.setVisible(true, this.preanim(arguments, 0));
            return this;
        }
    };
}());</pre>
</body>
</html>
